<template>
     <div class="g-sd4">
    <div class="g-wrap7">
      <h3 class="u-hd3" >
         <span class="f-fl">Ta的其他热门专辑</span>
      </h3>
      <ul class="m-rctlist f-cb">
         <li v-for="(item , index) in sidebarData" :key="index">
             <div class="cver u-cover u-cover-3">
                <a href="javascript:;">
                  <img :src="item.picUrl">
                </a>
             </div>
             <div class="info">
                <p class="f-thide"><a href="javascript:;" class="sname f-fs1 s-fc0" @click.stop="toFatherId(item.id)">{{item.name}} </a></p>
                <p class="s-fc3">{{item.publishTime | transfromDate}}</p>
             </div>
         </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {artist_album} from '../../../network/discover'
import {formatDate} from '../../../components/tool/tool'
export default {
   props:['Id'],
   data() {
       return {
           sidebarData:[]
       }
   },
  methods:{
      resolveArtist_album(id){  
          artist_album(id , 5).then(res => {
               this.sidebarData = res.data.hotAlbums
          })
      },
  toFatherId(id){
      this.$router.push({path:'/home/album' , query:{id:id}})
  }
  },
  filters:{
      transfromDate(value){
            return formatDate(value)
      }
  },
  watch:{
      Id(value){
         this.resolveArtist_album(value)
      }
  },
  created(){
      this.resolveArtist_album(this.Id)
  }
}
</script>
<style scoped>
.g-sd4 {
  position: relative;
  float: right;
  width: 270px;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  zoom: 1;
}
.g-wrap7 {
  padding: 20px 40px 40px 30px;
}
.u-hd3 {
    position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
}


.f-fl {
    float: left;
}
.m-piclist {
    margin-left: -13px;
    padding-bottom: 25px;
}
.f-cb::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}
.m-piclist li {
    display: inline;
    padding: 0 0 13px 13px;
}
.m-piclist li, .m-piclist li img {
    float: left;
    width: 40px;
    height: 40px;
}
.m-rctlist {
    margin-bottom: 25px;
}
.m-rctlist li {
    float: left;
    width: 200px;
    height: 50px;
    margin-bottom: 15px;
    line-height: 24px;
}
.m-rctlist .cver, .n-rctlist .cver img {
    float: left;
    width: 50px;
    height: 50px;
}
.m-rctlist .info {
    margin-left: 60px;
    line-height: 24px;
}
.m-rctlist .info p {
    width: 140px;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.s-fc0{
    color: #000;
}
a.s-fc0:hover {
    
    border-bottom: 1.5px #000 solid;
}
.f-fs1 {
    font-size: 14px;
}
.m-rctlist .by {
    float: left;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.m-rctlist .nm {
    float: left;
    max-width: 106px;
    margin: 0 2px 0 4px;
}
.s-fc3, a.s-fc3:hover {
    color: #666;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
</style>